<!-- 寄快递 -->
<template>
  <div class="container">
    <!-- Header with location -->
    <div class="header">
      <div class="location">
        <span>泸州</span>
        <svg fill="currentColor" viewBox="0 0 20 20">
          <path fill-rule="evenodd"
            d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z"
            clip-rule="evenodd" />
        </svg>
      </div>
      <div class="header-right">
        <div class="dots">
          <div class="dot"></div>
          <div class="dot"></div>
          <div class="dot"></div>
        </div>
        <div class="profile-icon"></div>
      </div>
    </div>

    <!-- Carousel Banner -->
    <div class="banner">
      <div class="carousel-container">
        <div class="carousel-wrapper" :style="{ transform: `translateX(-${currentSlide * 100}%)` }">
          <img v-for="(image, index) in bannerImages" :key="index" :src="image" :alt="`Banner ${index + 1}`"
            class="carousel-image" />
        </div>

        <!-- 轮播指示器 -->
        <div class="carousel-indicators">
          <button v-for="(image, index) in bannerImages" :key="index" @click="goToSlide(index)"
            :class="['indicator', { active: index === currentSlide }]"></button>
        </div>
      </div>
    </div>

    <!-- Membership Section -->
    <div class="membership-section">
      <div class="membership-header">
        <div class="membership-info">
          <svg fill="currentColor" viewBox="0 0 20 20">
            <path d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
          </svg>
          <span>普通会员 领本月保量礼包</span>
        </div>
        <button @click="claimGift" class="claim-btn">去领取</button>
      </div>
      <div class="points-section">
        <div class="points-info">
          <img src="../assets/img/ji.jpg" alt="Points icon" class="points-icon" />
          <span>点击抢 <span class="points-count">10次</span> 寄特快优惠</span>
        </div>
        <button @click="grabDiscount" class="grab-btn">去抢购</button>
      </div>
    </div>

    <!-- Quick Services -->
    <div class="quick-services">
      <div @click="expressDelivery" class="service-card">
        <img src="../assets/img/ji.jpg" alt="Express" class="service-icon" />
        <div class="service-info">
          <h3>寄快递</h3>
          <p>一小时取件</p>
        </div>
      </div>
      <div @click="logistics" class="service-card">
        <img src="../assets/img/fa.jpg" alt="Logistics" class="service-icon" />
        <div class="service-info">
          <h3>发物流</h3>
          <p>大件/客担/整车</p>
        </div>
      </div>
    </div>

    <!-- Service Grid -->
    <div class="services-grid">
      <div class="grid">
        <div v-for="service in services" :key="service.name" @click="handleServiceClick(service.name)"
          class="service-item">
          <div class="service-item-icon">
            <img :src="service.icon" :alt="service.name" />
            <span v-if="service.badge" class="badge">{{ service.badge }}</span>
          </div>
          <span class="service-name">{{ service.name }}</span>
        </div>
      </div>
    </div>

    <!-- Membership Card -->
    <div class="membership-card">
      <div class="card-content">
        <div class="card-info">
          <h3>至尊会员</h3>
          <p>超值年卡</p>
        </div>
        <div class="pricing">
          <div class="price-item">
            <p>20<span style="font-size: 12px;">元</span>×3</p>
            <p>1年有效期</p>
          </div>
          <div class="price-item">
            <p>10<span style="font-size: 12px;">元</span>×2</p>
            <p>1年有效期</p>
          </div>
          <button @click="activateMembership" class="activate-btn">
            <span class="price-large">58</span><span class="price-small">元</span>
            <br>
            <span class="price-small">去开通</span>
          </button>
        </div>
      </div>
    </div>

    <!-- Bottom Actions -->
    <div class="bottom-actions">
      <button @click="customerService" class="action-btn">
        <img src="../assets/1-6.png" alt="Customer service" />
        <span>在线客服</span>
      </button>
      <button @click="businessCooperation" class="action-btn">
        <img src="../assets/5-5.png" alt="Business cooperation" />
        <span>企业合作</span>
      </button>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted, onUnmounted } from 'vue'
import { useRouter } from 'vue-router'
import img from '../assets/img/banner.jpg'
import img2 from '../assets/img/banner2.jpg'
import tu01 from '../assets/img/tu01.jpg'
import tu02 from '../assets/img/tu02.jpg'
import tu03 from '../assets/img/tu03.jpg'
import tu04 from '../assets/img/tu04.jpg'
import tu05 from '../assets/img/tu05.jpg'
import tu06 from '../assets/img/tu06.jpg'
import tu07 from '../assets/img/tu07.jpg'
import tu08 from '../assets/img/tu08.jpg'
import tu09 from '../assets/img/tu09.jpg'
import tu10 from '../assets/img/tu10.jpg'
import tu11 from '../assets/img/tu11.jpg'
import tu12 from '../assets/img/tu12.jpg'

// 初始化路由
const router = useRouter()

// 轮播图相关数据
const currentSlide = ref(0)
const bannerImages = ref([
  img,
  img2
])

// 自动轮播定时器
let autoPlayTimer = null

// 服务数据
const services = ref([
  { name: '同城急送', icon: tu01 },
  { name: '扫码寄件', icon: tu02 },
  { name: '批量寄', icon: tu03 },
  { name: '代收货款', icon: tu04 },
  { name: '港澳台寄送', icon: tu05 },
  { name: '国际寄送', icon: tu06 },
  { name: '丰巢寄件', icon: tu07, badge: '24h' },
  { name: '校园专区', icon: tu08 },
  { name: '网购退货', icon: tu09 },
  { name: '礼物寄送', icon: tu10 },
  { name: '生鲜寄', icon: tu11 },
  { name: '冷链服务', icon: tu12 }
])

// 轮播图方法
const goToSlide = (index) => {
  currentSlide.value = index
}

const nextSlide = () => {
  currentSlide.value = (currentSlide.value + 1) % bannerImages.value.length
}

const startAutoPlay = () => {
  autoPlayTimer = setInterval(() => {
    nextSlide()
  }, 3000) // 每3秒切换一次
}

const stopAutoPlay = () => {
  if (autoPlayTimer) {
    clearInterval(autoPlayTimer)
    autoPlayTimer = null
  }
}

// 生命周期钩子
onMounted(() => {
  startAutoPlay()
})

onUnmounted(() => {
  stopAutoPlay()
})

// 点击事件处理函数
const claimGift = () => {
  console.log('领取礼包')
  alert('跳转到礼包领取页面')
}

const grabDiscount = () => {
  console.log('抢购优惠')
  alert('跳转到优惠抢购页面')
}

const expressDelivery = () => {
  console.log('寄快递')
  router.push('/express-delivery')
}

const logistics = () => {
  console.log('发物流')
  router.push('/send-courier')
}

const handleServiceClick = (serviceName) => {
  console.log(`点击服务: ${serviceName}`)
  alert(`跳转到${serviceName}页面`)
}

const activateMembership = () => {
  console.log('开通会员')
  alert('跳转到会员开通页面')
}

const customerService = () => {
  console.log('在线客服')
  alert('跳转到客服页面')
}

const businessCooperation = () => {
  console.log('企业合作')
  alert('跳转到企业合作页面')
}
</script>

<style scoped>
/* 基础样式重置 */
* {
  box-sizing: border-box;
}

/* 容器样式 */
.container {
  min-height: 100vh;
  background-color: #f5f5f5;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

/* 头部样式 */
.header {
  background: white;
  padding: 8px 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.location {
  display: flex;
  align-items: center;
  color: #374151;
  font-size: 14px;
}

.location svg {
  width: 16px;
  height: 16px;
  margin-left: 4px;
  color: #6b7280;
}

.header-right {
  display: flex;
  align-items: center;
  gap: 16px;
}

.dots {
  display: flex;
  gap: 4px;
}

.dot {
  width: 4px;
  height: 4px;
  background: #9ca3af;
  border-radius: 50%;
}

.profile-icon {
  width: 24px;
  height: 24px;
  border: 2px solid #9ca3af;
  border-radius: 50%;
}

/* 轮播横幅样式 */
.banner {
  margin: 16px;
  border-radius: 12px;
  overflow: hidden;
  position: relative;
}

.carousel-container {
  position: relative;
  width: 100%;
  height: 200px;
  overflow: hidden;
}

.carousel-wrapper {
  display: flex;
  width: 100%;
  height: 100%;
  transition: transform 0.5s ease-in-out;
}

.carousel-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  flex-shrink: 0;
}

/* 轮播指示器样式 */
.carousel-indicators {
  position: absolute;
  bottom: 16px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 8px;
}

.indicator {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  border: none;
  background: rgba(255, 255, 255, 0.5);
  cursor: pointer;
  transition: background 0.3s ease;
}

.indicator.active {
  background: white;
}

.indicator:hover {
  background: rgba(255, 255, 255, 0.8);
}

/* 会员区域样式 */
.membership-section {
  margin: 0 16px 16px;
  background: white;
  border-radius: 12px;
  padding: 16px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.membership-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}

.membership-info {
  display: flex;
  align-items: center;
}

.membership-info svg {
  width: 20px;
  height: 20px;
  color: #9ca3af;
  margin-right: 8px;
}

.claim-btn {
  color: #ef4444;
  font-size: 14px;
  background: none;
  border: none;
  cursor: pointer;
}

.points-section {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.points-info {
  display: flex;
  align-items: center;
}

.points-icon {
  width: 24px;
  height: 24px;
  margin-right: 8px;
}

.points-count {
  color: #ef4444;
  font-weight: bold;
}

.grab-btn {
  background: #fce7f3;
  color: #ec4899;
  padding: 4px 12px;
  border-radius: 20px;
  border: none;
  font-size: 14px;
  cursor: pointer;
}

/* 快速服务样式 */
.quick-services {
  margin: 0 16px 16px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

.service-card {
  background: white;
  border-radius: 12px;
  padding: 16px;
  display: flex;
  align-items: center;
  cursor: pointer;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  transition: transform 0.2s;
}

.service-card:hover {
  transform: translateY(-2px);
}

.service-icon {
  width: 40px;
  height: 40px;
  margin-right: 12px;
}

.service-info h3 {
  font-weight: 500;
  color: #1f2937;
  margin-bottom: 4px;
}

.service-info p {
  color: #6b7280;
  font-size: 14px;
}

/* 服务网格样式 */
.services-grid {
  margin: 0 16px 16px;
  background: white;
  border-radius: 12px;
  padding: 16px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}

.service-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  cursor: pointer;
  padding: 8px;
  border-radius: 8px;
  transition: background 0.2s;
}

.service-item:hover {
  background: #f9fafb;
}

.service-item-icon {
  position: relative;
  margin-bottom: 8px;
}

.service-item-icon img {
  width: 32px;
  height: 32px;
}

.badge {
  position: absolute;
  top: -4px;
  right: -4px;
  background: #ef4444;
  color: white;
  font-size: 10px;
  padding: 2px 4px;
  border-radius: 4px;
}

.service-name {
  font-size: 12px;
  color: #374151;
  text-align: center;
  line-height: 1.2;
}

/* 会员卡样式 */
.membership-card {
  margin: 0 16px 16px;
  background: white;
  border-radius: 12px;
  padding: 16px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.card-content {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.card-info h3 {
  font-weight: 500;
  color: #9D844E;
  margin-bottom: 4px;
}

.card-info p {
  color: #6b7280;
  font-size: 14px;
}

.pricing {
  display: flex;
  align-items: center;
  gap: 16px;

}

.price-item {
  text-align: center;
  background-color: #FCEEE5;
  border-radius: 10px;
}

.price-item p:first-child {
  color: #374151;
  font-weight: 500;
}

.price-item p:last-child {
  color: #6b7280;
  font-size: 12px;
}

.activate-btn {
  background: #ef4444;
  color: white;
  padding: 12px 16px;
  border-radius: 20px;
  border: none;
  cursor: pointer;
  text-align: center;
  line-height: 1.2;
}

.price-large {
  font-size: 18px;
  font-weight: bold;
}

.price-small {
  font-size: 12px;
}

/* 底部操作样式 */
.bottom-actions {
  margin: 0 16px 65px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  /* margin-bottom: 100px!important; */
}

.action-btn {
  background: white;
  border-radius: 12px;
  padding: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  cursor: pointer;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  transition: transform 0.2s;
}

.action-btn:hover {
  transform: translateY(-2px);
}

.action-btn img {
  width: 24px;
  height: 24px;
  margin-right: 8px;
}

.action-btn span {
  color: #374151;
}

/* 响应式设计 */
@media (max-width: 480px) {
  .banner {
    margin: 12px;
  }

  .carousel-container {
    height: 160px;
  }

  .grid {
    gap: 12px;
  }

  .service-name {
    font-size: 11px;
  }
}
</style>